<template>
	<div>

		<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
			<a-spin :spinning="loading">
				<a-form :form="form">
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="药名称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'medicineName',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="封面图" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`iconPath`) < 1"
                              accept=".png,.jpg"
									@uploadSuccess="formuploadSuccess($event, `iconPath`)" v-decorator="[
                    `iconPath`,
                    {
                      rules: [{ required: true, message: '请上传图片', type: 'array' }],
                      initialValue: []
                    }
                  ]" />
							</a-form-item>
						</a-col>
					</a-row>

					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="	适应宠物" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1" @change="changeSelect" placeholder="请选择"
									v-decorator="['targetType', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value="0">猫</a-select-option>
									<a-select-option :value="1">狗</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
            <a-col :span="12">
							<a-form-item class="mb-15" label="	状态" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1" @change="changeSelect" placeholder="请选择"
									v-decorator="['status', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value="0">慎用</a-select-option>
									<a-select-option :value="1">禁用</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>

					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="功能主治" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'indications',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
            <a-col :span="12">
							<a-form-item class="mb-15" label="使用注意" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'precautions',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>

					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="用法" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'useage',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
            <a-col :span="12">
							<a-form-item class="mb-15" label="用量" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'dosage',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>


					</a-row>



					<!-- <a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺销量" :label-col="labelCol" :wrapper-col="wrapperCol">
								0单
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺收入流" :label-col="labelCol" :wrapper-col="wrapperCol">
								0元
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="账户余额" :label-col="labelCol" :wrapper-col="wrapperCol">
								0元
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺评分" :label-col="labelCol" :wrapper-col="wrapperCol">
								0分
							</a-form-item>
						</a-col>
					</a-row> -->
					<a-row :gutter="[24, 0]">
						<a-col :span="24">
							<a-form-item class="mb-15" label="简介描述," :label-col="{ span: 4 }"
								:wrapper-col="{ span: 20 }">
								<a-textarea placeholder="请输入" v-decorator="[
                    'remark',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="300"></a-textarea>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>
<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		get
	} from 'lodash'
  import {
    medicineCreate,
    medicineUpdate
  } from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this),
				addres_list: [],
				business_list: [],
         store_list: []
			}
		},

		methods: {

			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					[type]: [data.path]
				})
			},
			changeSelect(e) {
				console.log(e)
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						const {
							info
						} = this
						if (values.time) {
							values.timeStart = this.$utils.getStartTime(values.time[0])
							values.timeEnd = this.$utils.getEndTime(values.time[1])
						}
						let data = {
							id: info && info.id ? info.id : undefined,
							...this.$utils.trimValue(values),
							isEnabled: typeof values.isEnabled === 'undefined' ? true : values.isEnabled,
							// addressCodes:values.join(',')
						}

						console.log('data', data)
						data.iconPath = data.iconPath[0]
						// return
						// const fun = info && info.id ? deductionDetail : deductionDetail
						if(this.titles=='新增'){
              medicineCreate(data).then(() => {
								this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
						}else{
              medicineUpdate(data)
								.then(() => {
									this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
									this.$emit('upload')
									this.cancel()
								})
								.finally(() => {
									this.loading = false
								})
						}

					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
						id: 1
					})
					.then(data => {
						this.details = data
					})
					.finally(() => (this.loading = false))
			},
			async open(data) {
				this.info = data
				console.log(data, '111111')
				if (data.id) {
					this.titles = '修改'
				} else {
					this.titles = '新增'
				}
				this.showModal = true

				// images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
				this.$nextTick(() => {

					this.form.setFieldsValue({
						isEnabled: true,
						...data,
            iconPath: [data.iconPath],
					})
				})

			},
			get_address(id) {
				return new Promise(resolve => {
					getArea().then(res => {
						console.log(res)
						resolve(res)
					})
				})
			},
			change_address(e) {
				console.log(e)
				this.form.setFieldsValue({
					addressCodes: e
				})
			},

		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;
	}
</style>